<template>
	<view class="root-lay flex-v">
		<view class="head-lay flex-h">
			<view class="head-title">{{$t("public.edit")}}</view>
		</view>
		<view class="content-lay">
			<view class="info-line">
				<view class="info-item flex-h" style="width: 100%;">
					<view class="info-title" style="width: 15%;">{{$t("thickShow.photoSegment.fileName")}}：</view>
					<view class="info-value" style="width: 85%;">{{dataInfo.photo_path}}</view>
				</view>
			</view>

			<view class="info-line flex-h">
				<view class="info-item flex-h" style="width: 100%;">
					<view class="info-title" style="width: 15%;">{{$t("thickShow.photoSegment.takeDate")}}：</view>
					<view class="info-value" style="width: 40%;">{{dataInfo.ssn_date}}</view>
					<view style="width: 5%;"/>
					<checkbox style="width: 35%;"
						value="isNotPrint" :checked="dataInfo.not_print == 1 ? true : false " class="info-check"
						@change="onCheckChange">
						{{$t("thickShow.photoSegment.isNotPrintObj")}}</checkbox>
				</view>
			</view>
			
			<view class="info-line">
				<view class="info-item flex-v" style="width: 100%; align-items: flex-start;">
					<view class="info-title" style="width: 50%;">{{$t("thickShow.photoSegment.note")}}</view>
						<textarea v-model="dataInfo.photo_note" class="input-str" placeholder-style="color:#7f7f7f" :placeholder="$t('warnning.inputTip')"/>				
					</view>
			</view>
		</view>
		
		<view class="bottom-lay flex-h">
			<view class="btn" @click="onCancelClick">{{$t("public.cancel")}}</view>
			<view class="btn" style="color: #1890FF; margin-left: 1upx;" @click="onConfirmClick">{{$t("public.confirm")}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataInfo: {
				type: Object
			},
		},
		
		mounted() {
			
		},
		
		methods:{
			onCheckChange(e) {
				console.log("onCheckChange e = ")
				console.log(e)
			},
			
			onCancelClick() {
				this.$emit("onCancelClick")
			},
			
			onConfirmClick() {
				this.$emit("onConfirmClick", this.dataInfo)
			},
		}
	}
</script>

<style scoped lang="scss">
	.root-lay {}

	.head-lay {
		position: relative;
		padding: 11rpx;
		padding-top: (--page-right-toolbar-width);

		.head-title {
			margin: 0 auto;
			font-size: 16rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.content-lay {
		height: calc(50%);
		width: 55vw;
		// border: 1px solid #E8E8E8;
		padding: 15upx;
	}

	.info-line {
		align-items: center;
		width: 100%;
		margin-bottom: 10rpx;
		justify-content: space-between;
		box-sizing: border-box;

		.info-item {
			align-items: center;
		}

		.info-title {
			font-size: 14rpx;
			color: #1F2329;
			padding: 5rpx;
		}

		.info-value {
			font-size: 14rpx;
			background: #FDFACC;
			border-radius: 2px;
			border: 1px solid #CFD3D5;
			padding: 10upx;
			box-sizing: border-box;
		}

		.info-picker {
			align-items: center;
		}

		.input-str {
			width: calc(100% - 10upx);
			margin-top: 10upx;
			padding: 15upx;
			border: 1px solid #CFD3D5;
		}

		.info-btn {
			background: #F6F6F6;
			border-radius: 2px;
			border: 1px solid #DEE0E3;
			padding: 10upx;
		}
		
		.info-check {
			width: calc(100% - 40upx);
			padding: 10upx 20upx;
			background: #A3D9FF;
			border-radius: 2px;
		}
		
		.input-str {
			width: calc(100% - 30upx);
			margin-top: 10upx;
			padding: 15upx;
			border: 1px solid #CFD3D5;
		}
	}
	
	.bottom-lay {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		align-items: center;
		background-color: #9f9f9f;
		padding: 1upx;
	
		.btn {
			width: 50%;
			height: 100%;
			background-color: #fff;
			color: #000;
			padding: 10upx;
	
			text-align: center;
		}
	}
</style>
